<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title>班级通知</title>
	<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
	<link rel="stylesheet" href="css/main.css">
	<link rel="stylesheet" href="css/solitaire.css" />

	<style>
		.highlight {
			border-bottom: 3px solid orange;
			color: orange;
		}
	</style>

</head>

<body>
	<div class="contain">
		<div class="header">
			<div class="header_title">班级通知</div>
			<a onclick="history.back()">
				<img src="image/return.png" alt="" class="return">
			</a>
		</div>
	</div>
	<div style="height: 40px;"></div>
	<div id="vue-root">

		<div class="classes_notice">
			<div class="notice_info">
				<div class="title" v-text="notice.title"></div>
				<div class="img_box" v-if="notice.pic">
					<img :src="getImg(notice.pic)" class="notice_img">
				</div>
				<div class="info" v-html="notice.text"></div>
			</div>
		</div>
		<div class="notice_count" v-if="isTeacher||notice.showRead">
			<div class="count">
				<div class="count_noRead" :class="{highlight:!read}" @click="read=false">未阅读
					<span class="noRead_num" v-text="all[0].length"></span>人
				</div>
				<div class="count_read" :class="{highlight:read}" @click="read=true">阅读
					<span class="read_num" v-text="all[1].length"></span>人
				</div>
			</div>

			<template v-for="(list,i) in all">
				<div class="people_read">
					<div class="people" v-show="i==1==read" v-for="(item,index) in list" :key="index">
						<div class="photo">
							<img :src="avatar(item)" class="notice_img" />
						</div>
						<div class="name">
							<span v-text="item.name"></span>
							<span class="relation" v-text="['','爸爸','妈妈','家长'][item.type]"></span>
						</div>
						<div class="time" v-if="read" v-text="item.time"></div>
					</div>
				</div>
			</template>
		</div>
	</div>


	<script src="/scriptZIP/qs.min.js"></script>
	<script src="/scriptZIP/vue.min.js"></script>
	<script src="/scriptZIP/axios.min.js"></script>
	<script src="/wechat/js/wx.js"></script>

	<script src="/js/common.js"></script>

	<script>
		var app = new Vue({
			el: '#vue-root',
			data: {
				id: params().id,
				isTeacher: isTeacher(),
				notice: {},
				all: [[], []],
				read: false
			},
			created: function () {
				if (params().from == 'home') {
					axios.get('/s/me').then(function (res) {
						this.schoolId = res.data.schoolId;
						this.reading();
						this.getData();
					}.bind(this));
					return;
				}
				this.schoolId = getPerson().schoolId;
				if (!this.isTeacher) {
					this.reading();
				}
				this.getData();
			},
			methods: {
				reading: function () {
					axios.post('/s/classNotice/read/' + this.id).then(function (res) {
						console.log('阅');
					});
				},
				getData: function () {
					var url = this.isTeacher ? '/t' : '/s';
					axios.get(url + '/classNotice/' + this.id).then(function (res) {
						this.notice = res.data;
						this.all = [this.notice.unreads, this.notice.reads];

						this.$nextTick(function () {
							bindPreview();
						});

					}.bind(this));
				},
				getImg: function (pic) {
					return '/static/' + this.schoolId + '/classes_notice/' + pic;
				},
				avatar: function (item) {
					if (!item.avatar) return 'image/avatar.svg';
					return '/static/' + this.schoolId + '/binding/' + item.avatar;
				}
			}
		});

	</script>

</body>

</html>